<template>
  <div class="video-list">
    <div v-if="title" class="list-header">
      <h2>{{ title }}</h2>
      <button v-if="showMore" class="more-btn" @click="loadMore">
        更多 <i class="fa fa-angle-right"></i>
      </button>
    </div>
    <div class="videos-grid" :class="{ 'has-scrollbar': hasScrollbar }">
      <VideoCard 
        v-for="video in videos" 
        :key="video.id" 
        :video="video" 
        @click="handleVideoClick(video.id)"
      />
    </div>
    <!-- 骨架屏加载状态 -->
    <div v-if="loading && videos.length === 0" class="skeleton-container">
      <div v-for="i in skeletonCount" :key="i" class="skeleton-item">
        <div class="skeleton-thumbnail"></div>
        <div class="skeleton-title"></div>
        <div class="skeleton-info"></div>
      </div>
    </div>
    <!-- 加载更多状态 -->
    <div v-if="loading && videos.length > 0" class="loading-more">
      <div class="loading-spinner"></div>
      <span>加载中...</span>
    </div>
    <!-- 空状态 -->
    <div v-if="!loading && videos.length === 0" class="empty-state">
      <i class="fa fa-film"></i>
      <p>{{ emptyText || '暂无视频内容' }}</p>
      <button v-if="enableRefresh" class="refresh-btn" @click="refreshList">
        <i class="fa fa-refresh"></i> 刷新
      </button>
    </div>
    <!-- 错误状态 -->
    <div v-if="error && !loading" class="error-state">
      <i class="fa fa-exclamation-circle"></i>
      <p>{{ errorMessage || '加载失败，请稍后重试' }}</p>
      <button class="retry-btn" @click="retry">
        <i class="fa fa-refresh"></i> 重试
      </button>
    </div>
  </div>
</template>

<script>
import VideoCard from './VideoCard.vue'
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'

export default {
  name: 'VideoList',
  components: {
    VideoCard,
  },
  props: {
    videos: {
      type: Array,
      required: true,
      default: () => [],
    },
    title: {
      type: String,
      default: '',
    },
    showMore: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    error: {
      type: Boolean,
      default: false,
    },
    errorMessage: {
      type: String,
      default: '',
    },
    emptyText: {
      type: String,
      default: '',
    },
    enableRefresh: {
      type: Boolean,
      default: false,
    },
    layout: {
      type: String,
      default: 'grid', // 'grid' or 'list'
      validator: (value) => ['grid', 'list'].includes(value),
    },
    columnCount: {
      type: Object,
      default: () => ({
        xs: 1,
        sm: 2,
        md: 2,
        lg: 3,
        xl: 3,
      }),
    },
    gap: {
      type: Object,
      default: () => ({
        xs: 16,
        sm: 16,
        md: 20,
        lg: 20,
        xl: 24,
      }),
    },
  },
  setup(props) {
    const hasScrollbar = ref(false)
    const containerRef = ref(null)
    
    // 计算骨架屏数量，根据响应式布局动态调整
    const skeletonCount = computed(() => {
      const column = window.innerWidth < 768 ? 2 : 4
      return column * 2
    })
    
    // 检测容器是否出现滚动条
    const checkScrollbar = () => {
      if (containerRef.value) {
        hasScrollbar.value = containerRef.value.scrollWidth > containerRef.value.clientWidth + 10
      }
    }
    
    onMounted(() => {
      window.addEventListener('resize', checkScrollbar)
      checkScrollbar()
    })
    
    onBeforeUnmount(() => {
      window.removeEventListener('resize', checkScrollbar)
    })
    
    return {
      hasScrollbar,
      containerRef,
      skeletonCount,
      checkScrollbar,
    }
  },
  methods: {
    // 处理视频点击
    handleVideoClick(videoId) {
      this.$emit('videoClick', videoId)
    },
    
    // 加载更多视频
    loadMore() {
      this.$emit('loadMore')
    },
    
    // 重试加载
    retry() {
      this.$emit('retry')
    },
    
    // 刷新列表
    refreshList() {
      this.$emit('refresh')
    },
    
    // 滚动到顶部
    scrollToTop() {
      if (this.containerRef) {
        this.containerRef.scrollTo({ top: 0, behavior: 'smooth' })
      }
    },
  },
}
</script>

<style scoped>
.video-list {
  margin-bottom: 40px;
  position: relative;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 10px;
}

.list-header h2 {
  font-size: 24px;
  font-weight: bold;
  color: var(--text-color, #18191c);
  position: relative;
  padding-left: 12px;
}

.list-header h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background-color: #fb7299;
  border-radius: 2px;
}

.more-btn {
  background: none;
  border: none;
  color: var(--text-secondary, #909399);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.3s ease;
  padding: 6px 12px;
  border-radius: 16px;
}

.more-btn:hover {
  color: #fb7299;
  background-color: #fff0f3;
}

.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 0 10px;
  transition: all 0.3s ease;
}

/* 骨架屏样式 */
.skeleton-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 0 10px;
}

.skeleton-item {
  animation: skeleton-loading 1.5s linear infinite alternate;
}

.skeleton-thumbnail {
  width: 100%;
  height: 168px;
  background-color: #f0f2f5;
  border-radius: 8px;
  margin-bottom: 12px;
}

.skeleton-title {
  width: 80%;
  height: 20px;
  background-color: #f0f2f5;
  border-radius: 4px;
  margin-bottom: 8px;
}

.skeleton-info {
  width: 60%;
  height: 16px;
  background-color: #f0f2f5;
  border-radius: 4px;
}

@keyframes skeleton-loading {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.8;
  }
}

/* 加载更多状态 */
.loading-more {
  text-align: center;
  padding: 30px 0;
  color: var(--text-secondary, #909399);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #f0f2f5;
  border-top-color: #fb7299;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary, #909399);
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state p {
  font-size: 16px;
  margin-bottom: 20px;
}

.refresh-btn {
  background-color: #f0f2f5;
  color: var(--text-secondary, #909399);
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.refresh-btn:hover {
  background-color: #e6e8eb;
  color: var(--text-color, #18191c);
}

/* 错误状态 */
.error-state {
  text-align: center;
  padding: 60px 20px;
  color: #f44336;
}

.error-state i {
  font-size: 48px;
  margin-bottom: 16px;
}

.error-state p {
  font-size: 16px;
  margin-bottom: 20px;
  color: var(--text-secondary, #909399);
}

.retry-btn {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.retry-btn:hover {
  background-color: #d32f2f;
  transform: translateY(-2px);
}

/* 列表布局样式 */
.videos-grid.list-layout {
  grid-template-columns: 1fr;
  gap: 16px;
}

.videos-grid.list-layout .video-card {
  flex-direction: row;
  height: 140px;
  align-items: flex-start;
}

.videos-grid.list-layout .video-card .thumbnail-container {
  width: 240px;
  height: 140px;
  flex-shrink: 0;
}

.videos-grid.list-layout .video-card .video-info {
  flex: 1;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .videos-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
  }
}

@media (max-width: 1200px) {
  .videos-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
  }
  
  .skeleton-container {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
  }
  
  .skeleton-thumbnail {
    height: 148px;
  }
  
  .list-header h2 {
    font-size: 22px;
  }
}

@media (max-width: 992px) {
  .videos-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }
  
  .skeleton-container {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }
  
  .skeleton-thumbnail {
    height: 135px;
  }
}

@media (max-width: 768px) {
  .videos-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 8px;
  }
  
  .skeleton-container {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 8px;
  }
  
  .skeleton-thumbnail {
    height: 180px;
  }
  
  .list-header {
    padding: 0 8px;
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .list-header h2 {
    font-size: 20px;
    width: 100%;
    order: 1;
  }
  
  .more-btn {
    order: 2;
    margin-left: auto;
  }
  
  /* 列表布局在移动端自适应 */
  .videos-grid.list-layout .video-card {
    height: 120px;
  }
  
  .videos-grid.list-layout .video-card .thumbnail-container {
    width: 200px;
    height: 120px;
  }
}

@media (max-width: 576px) {
  .skeleton-thumbnail {
    height: 150px;
  }
  
  .videos-grid.list-layout .video-card {
    height: 100px;
  }
  
  .videos-grid.list-layout .video-card .thumbnail-container {
    width: 160px;
    height: 100px;
  }
}

/* 滚动条样式 */
.videos-grid.has-scrollbar {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #dcdfe6 #f0f2f5;
}

.videos-grid.has-scrollbar::-webkit-scrollbar {
  height: 6px;
}

.videos-grid.has-scrollbar::-webkit-scrollbar-track {
  background: #f0f2f5;
  border-radius: 3px;
}

.videos-grid.has-scrollbar::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 3px;
}

.videos-grid.has-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #c0c4cc;
}
</style>